* {
  margin: 0;
  padding: 0;
  /* 文字禁止选中 */
  user-select: none;
  box-sizing: border-box;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
}

button {
  outline: none;
  width: 100px;
  height: 40px;
  color: #409eff;
  border: 1px solid #b3d8ff;
  background-color: #eff5ff;
  border-radius: 4px;
  transition: all .3s;
  cursor: pointer;
  &:hover {
    border-color: #409eff;
    background-color: #409eff;
    color: #fff;
  }
}

/* 模态框 */
.model-box {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.45);
  .content {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 420px;
    height: 350px;
    padding: 0 20px;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
    .title {
      display: flex;
      justify-content: space-between;
      height: 60px;
      line-height: 60px;
      cursor: move;
      span {
        font-size: 18px;
        color: #333;
      }
      i {
        // i 标签默认是斜体，通过这个属性可以取消倾斜
        font-style: normal;
        font-size: 24px;
        color: #909399;
        cursor: pointer;
        &:hover {
          color: #409eff;
        }
      }
    }
    form {
      .form-input {
        margin: 20px 0;
        label {
          font-size: 14px;
          color: #606266;
          cursor: pointer;
        }
        input {
          width: 100%;
          height: 42px;
          outline: none;
          padding: 0 15px;
          margin-top: 20px;
          border: 1px solid #dcdfe6;
          &:hover {
            border-color: #c0c4cc;
          }
          &:focus {
            border-color: #409eff;
          }
        }
        button {
          float: right;
          margin-top: 10px;
        }
      }
    }
  }
}
